<template>
  <div class="serveradd">
    <h3>添加服务器</h3>
    <el-divider></el-divider>
    <el-form ref="form" :rules="rules" :model="serverForm" label-width="110px" >
      <el-form-item label="服务器IP" prop="ip">
        <el-input clearable v-model="serverForm.ip" placeholder="服务器IP"></el-input>
      </el-form-item>
      <el-form-item label="服务器用户名" prop="yhm">
        <el-input clearable v-model="serverForm.yhm" placeholder="服务器用户名"></el-input>
      </el-form-item>
      <el-form-item label="服务器密码" prop="mm">
        <el-input clearable v-model="serverForm.mm" placeholder="服务器密码"></el-input>
      </el-form-item>
      <el-form-item label="服务器拥有者" prop="yyz">
        <el-input clearable v-model="serverForm.yyz" placeholder="服务器拥有者"></el-input>
      </el-form-item>
      <el-form-item label="服务器地域" prop="dy">
        <el-input clearable v-model="serverForm.dy" placeholder="服务器所属地域"></el-input>
      </el-form-item>
      <el-form-item label="服务器" prop="fws">
        <el-radio-group v-model="serverForm.fws">
          <el-radio-button label="阿里云"></el-radio-button>
          <el-radio-button label="腾讯云"></el-radio-button>
          <el-radio-button label="华为云"></el-radio-button>
          <el-radio-button label="小鸟云"></el-radio-button>
          <el-radio-button label="其他"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="服务器到期时间">
        <el-date-picker
            v-model="serverForm.dqsj"
            type="date"
            clearable
            placeholder="选择服务器到期日期"
            format="yyyy年M月d日"
            value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="服务器备注" prop="bz">
        <el-input clearable v-model="serverForm.bz" placeholder="服务器备注"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add">添加服务器</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import qs from "qs";
import {addServer} from "../../utils/api";

export default {
  name: "ServerAdd",
  data(){
    return {
      serverForm:{
        ip:'',
        yhm:'Administrator',
        mm:'admin',
        dqsj:'',
        fws:'阿里云',
        dy:'',
        yyz:'',
        bz:''
      },
      rules:{
        ip: [
          { required: true, message: '请输入服务器IP地址',  trigger: 'blur' },
          { min: 7, max: 15, message: '长度在 7 到 15 个字符', trigger: 'blur' },
          { validator: (rule, value, callback) => {
              if (value.indexOf(" ")>0) {
                callback(new Error('不能包含空格'))
              }
              callback()
            },trigger: 'blur'
          },
          { pattern : /((25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.){3}(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)/ , message: '请输入正确的服务器IP地址', trigger: 'blur'},
        ],
        yym:[
          { required: true, message: '请输入服务器登录用户名',  trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
          { validator: (rule, value, callback) => {
              if (value.indexOf(" ")>0) {
                callback(new Error('不能包含空格'))
              }
              callback()
            },trigger: 'blur'
          },
        ],
        mm:[
          { required: true, message: '请输入服务器登录密码',  trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
          { validator: (rule, value, callback) => {
              if (value.indexOf(" ")>0) {
                callback(new Error('不能包含空格'))
              }
              callback()
            },trigger: 'blur'
          },
        ],
        yyz:[
          { required: true, message: '请输入服务器拥有者',  trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
          { validator: (rule, value, callback) => {
              if (value.indexOf(" ")>0) {
                callback(new Error('不能包含空格'))
              }
              callback()
            },trigger: 'blur'
          },
        ],
        dy:[
          { required: true, message: '请输入服务器所在地区',  trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' },
          { validator: (rule, value, callback) => {
              if (value.indexOf(" ")>0) {
                callback(new Error('不能包含空格'))
              }
              callback()
            },trigger: 'blur'
          },
        ],
        bz:[
          { required: false, message: '请输入对此服务器的备注',  trigger: 'blur' },
          { min: 0, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
          { validator: (rule, value, callback) => {
              if (value.indexOf(" ")>0) {
                callback(new Error('不能包含空格'))
              }
              callback()
            },trigger: 'blur'
          },
        ]
      }
    }
  },
  methods:{
    add(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 向后台发送请求
          addServer(qs.stringify(
              {ip:this.serverForm.ip,yhm:this.serverForm.yhm,mm:this.serverForm.mm,dqsj:new Date(this.serverForm.dqsj).getTime(),fws:this.serverForm.fws,dy:this.serverForm.dy,yyz:this.serverForm.yyz,bz:this.serverForm.bz})
          ).then(respose=>{
            if(respose.status===200){
              this.$toast.success("修改成功");
              this.serverForm.ip=this.serverForm.dqsj=this.serverForm.dy=this.serverForm.yyz=this.serverForm.bz="";
              this.serverForm.yhm='Administrator';
              this.serverForm.mm='admin';
              this.serverForm.fws='阿里云'
            }else{
              this.$toast.fail("修改失败")
            }
          }).catch(error=>{
            console.log(error);
          })
        } else {
          //就像用户提示发生错误的消息
          this.$toast.fail("你还有错误没修改呢！")
        }
      })


    }
  }
}
</script>

<style scoped>

</style>